<template>
  <div>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input v-model="formInline.user" placeholder="歌手姓名（可省略）" clearable></el-input>
      </el-form-item>

      <el-form-item label="地区">
        <i class="el-icon-location-information"></i>
        <el-select v-model="formInline.region" placeholder="地区（可省略）" clearable>
          <el-option
            v-for="(item,index) in regin"  :key="index"
            :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别">

        <el-select v-model="formInline.sex" placeholder="性别（可省略）" clearable >
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      stripe
      border
      highlight-current-row
      style="width: 100%">


      <el-table-column
        prop="singerName"
        align="center"
        label="姓名">


      </el-table-column>

      <el-table-column

        prop="singerAddress"
        align="center"


        label="地址">
      </el-table-column>
      <el-table-column
        prop="singerGender"
        align="center"


        label="性别">
      </el-table-column>
      <el-table-column
        prop="singerDescription"
        align="center"
        label="描述">
      </el-table-column>
    </el-table>

  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    data() {
      return {
        formInline: {
          user: '',
          region: '',
          sex:''
        },
        regin:{},
        tableData: []
      }
    },
    methods: {
      onSubmit() {
        console.log('submit!');
        axios.post("http://localhost:8100/singer/getSingerDynamic", {"singerName":this.formInline.user,"singerAddress":this.formInline.region,"singerGender":this.formInline.sex}).then(res=>{
          console.log(res.data.list);

          this.tableData=res.data.list;

        })
      },


    },
    created(){
      axios.get("http://localhost:8100/singer/getSingerAdress",this.formdata).then(res=>{
        console.log(res.data.list);
        this.regin=res.data.list;
      })
    }
  }
</script>

<style scoped>

</style>
